<template>
	<!-- 1. 顶部轮播图（自动播放swiper） -->
	<view class="section">
		<text class="title">泉州风光</text>
		<swiper class="swiper" autoplay interval="3000" circular>
			<swiper-item>
				<image src="/static/city1.jpg" mode="widthFix" class="swiper-img"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/city2.jpg" mode="widthFix" class="swiper-img"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/city3.jpg" mode="widthFix" class="swiper-img"></image>
			</swiper-item>
		</swiper>
	</view>
	<!-- 2.城市介绍 （富文本rich-text）-->
	<view class="section">
		<text class="title">城市介绍</text>
		<rich-text :nodes="cityIntro" class="city-intro"></rich-text>
	</view>
	<!-- 3. 探索进度（进度条progress） -->
	<view class="section">
		<text class="title">探索进度</text>
		<progress percent="60" show-info stroke-width="10" color="#007AFF"></progress>
	</view>
	<!-- 4. 城市选择（picker） -->
	<view class="section">
		<text class="title">选择城市</text>
		<picker mode="region" @change="onCityChange">
			<view class="picker">当前选择：{{province}}-{{city}}-{{district}}</view>
		</picker>
	</view>
	<!-- 5.：城市宣传 -->
	<view class="section">
		<text class="title">城市宣传</text>
		<view class="video-wrapper">
			<video :src="videoUrl" controls poster="/static/video-poster.jpg" class="video"></video>
		</view>
		<view class="audio-wrapper">
			<text class="audio-subtitle">泉州背景音乐</text>
			<view class="audio-group">
				<button class="audio-btn" @click="toggleMusic">
					<text class="btn-text">{{ isPlaying ? '暂停' : '播放' }}</text>
					<view class="btn-icon">
						<view v-if="!isPlaying" class="play-icon"></view>
						<view v-else class="pause-icon">
							<view class="pause-line"></view>
							<view class="pause-line"></view>
						</view>
					</view>
				</button>
				<text class="audio-desc">泉州南音-泉州传统乐团演奏</text>
				<slider class="audio-slider" :value="progress" @change="adjustProgress" min="0" max="100"></slider>
			</view>
		</view>
	</view>
	<!-- 6. 偏好设置 -->
	<view class="section">
		<text class="title">偏好设置</text>
		<view class="preference-item">
			<text>出行方式：</text>
			<radio-group @change="onTravelChange">
				<radio value="bus">公交</radio>
				<radio value="drive">自驾</radio>
				<radio value="walk">步行</radio>
			</radio-group>
		</view>
		<!-- 7.显示推荐景点（开关） -->
		<view class="preference-item">
			<text>显示推荐景点：</text>
			<switch :checked="showRecommend" @change="onRecommendChange"></switch>
		</view>
		<!-- 8.探索半径（滑块） -->
		<view class="uni-title">探索半径（km）</view>
		<view>
			<slider value="10" @change="sliderChange" min="1" max="20" show-value />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityIntro: `<p><strong>泉州</strong></p>历史文化：泉州是海上丝绸之路起点，宋元时为世界海洋商贸中心，多元文化交融。 </p> <p>著名景点：有开元寺、洛阳桥等众多世遗景点 。</p> <p>特色文化：提线木偶戏、南音等特色文化底蕴深厚，还有闽南建筑风格的蚵壳厝，展现独特魅力。</p>`,
				province: '福建省',
				city: '泉州市',
				district: '丰泽区',
				videoUrl: '/static/city-video.mp4',
				isPlaying: false,
				progress: 0,
				audioCtx: null, 
				musicUrl: "/static/city-music.mp3"
			}
		},
		mounted() {
			this.audioCtx = uni.createInnerAudioContext();
			this.audioCtx.src = this.musicUrl;

			this.audioCtx.onPlay(() => {
				this.isPlaying = true;
			});

			this.audioCtx.onPause(() => {
				this.isPlaying = false;
			});

			this.audioCtx.onTimeUpdate(() => {
				if (this.audioCtx.duration > 0) {
					this.progress = (this.audioCtx.currentTime / this.audioCtx.duration) * 100;
				}
			});
		},
		methods: {
			onCityChange(e) {
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.district = e.detail.value[2];
			},
			onTravelChange(e) {
				this.travelMode = e.detail.value;
			},
			onRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			onRadiusChange(e) {
				this.radius = e.detail.value;
			},

			toggleMusic() {
				if (this.isPlaying) {
					this.audioCtx.pause();
				} else {
					this.audioCtx.play();
				}
			},
			adjustProgress(e) {
				const progress = e.detail.value;
				if (this.audioCtx.duration > 0) {
					const seekTime = (progress / 100) * this.audioCtx.duration;
					this.audioCtx.seek(seekTime);
				}
			}
		},
		onUnload() {
			if (this.audioCtx) {
				this.audioCtx.destroy();
			}
		}
	};
</script>

<style>
	.section {
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.city-intro {
		font-size: 14px;
		line-height: 1.6;
		color: #444;
		padding: 0 10px;
	}

	.picker {
		border: 1px solid #eee;
		padding: 10px;
		border-radius: 4px;
	}

	.btn-text {
		font-size: 15px;
		margin-bottom: -7px;
	}

	.btn-icon {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.play-icon {
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 15px solid #fff;
	}

	.pause-icon {
		width: 17px;
		height: 25px;
		display: flex;
		justify-content: space-between;
	}

	.pause-line {
		width: 4px;
		height: 80%;
		background-color: #fff;
		border-radius: 2px;
	}

	.btn-play,
	.btn-pause {
		background-color: #007AFF;
		color: #fff;
	}

	.audio-desc {
		margin-bottom: 10px;
		font-size: 16px;
		color: #666;
	}

	.audio-slider {
		width: 100%;
		max-width: 260px;
	}
	.preference-item {
	  margin-bottom: 15px;
	  display: flex;
	  align-items: center;
	}
	.preference-item radio-group {
	  display: flex;
	}
	.preference-item radio {
	  margin-right: 15px;
	}
	.video {
	  width: 100%;
	  height: 300px;
	}
</style>